<template>
  <div class="notice-container table-box">
    <div class="card table-search">
      <vab-query-form>
        <vab-query-form-top-panel :span="24">
          <el-form :inline="true" :model="queryForm" @submit.prevent>
            <el-form-item>
              <el-input v-model.trim="queryForm.noticeTitle" clearable placeholder="请输入标题" />
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="queryData"> 查询 </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-top-panel>
      </vab-query-form>
    </div>
    <div class="card table-main">
      <ul v-loading="listLoading">
        <li v-for="(item, index) in list" :key="index" class="list-item">
          <el-card shadow="hover" @click="handleDetail(item)">
            <h3>{{ item.noticeTitle }}</h3>
            <!-- <div class="list-item-content" v-html="item.content"></div> -->
            <div class="card-header">
              <span class="time">发布时间 ：{{ item.cts }}</span>
              <span v-if="item.publishervo != null" class="names"> 发布人：{{ item.publishervo.username }} </span>
            </div>
          </el-card>
        </li>
      </ul>
      <el-pagination
        background
        :current-page="queryForm.pageNum"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        style="margin-top: 10px"
      />
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { getList } from "@/api/mains";

export default defineComponent({
  name: "UserNoticeList",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      list: [],
      url: "system/notice",
      total: 0,
      queryForm: { pageNum: 1, pageSize: 10, LIKE_noticeTitle: "" },
      layout: "total, sizes, prev, pager, next, jumper",
      listLoading: true
    });

    const fetchData = async () => {
      state.listLoading = true;
      const res = await getList(state.url, state.queryForm);
      state.list = res.data.rows;
      state.total = res.total;
      state.listLoading = false;
    };
    const handleSizeChange = val => {
      state.queryForm.pageSize = val;
      fetchData();
    };
    const handleCurrentChange = val => {
      state.queryForm.pageNum = val;
      fetchData();
    };
    const queryData = () => {
      state.queryForm.pageNum = 1;
      fetchData();
    };

    const handleDetail = obj => {
      router.push({
        name: "UserNoticeDetail",
        query: { id: obj.id }
      });
    };
    watch(
      () => route.path,
      value => {
        if (value === "/notice/index") fetchData();
      }
    );

    onMounted(() => {
      fetchData();
    });

    return {
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
      queryData,
      handleDetail
    };
  }
});
</script>

<style lang="scss" scoped>
.el-select-dropdown__item {
  height: auto;
  padding: 0;
  overflow: hidden;
  overflow-y: hidden;
}
.el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}
.el-tree-node__label {
  font-weight: normal;
}
.notice-container {
  height: 100%;
  background-color: var(--el-bg-color);
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    outline: none;
    .list-item {
      h3 {
        margin-top: 0;
      }
      .list-item-content {
        display: -webkit-box;
        overflow: hidden;
        line-height: 25px;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .card-header {
        height: 20px;
        margin-top: 10px;
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
        .time {
          float: left;
          color: #999999;
        }
        .names {
          float: right;
          color: #1890ff;
        }
      }
    }
  }
}
</style>
